<template>
	<view class="custom-info">
		<view>
			<view class="flex-box">
				<view class="custom-info-box">
					<view class="photo">
						<image :src="userInfo.avatar || defaultPhoto" mode="aspectFit"></image>
					</view>
					<view class="info-box">
						<view class="userName-box">{{ userInfo.nickName }}</view>
						<view class="phone-box">{{ userInfo.phoneNum }}</view>
					</view>
				</view>
				<!-- <view class="custom-info-box box-baseline">
					<view class="level">VIP.</view>
					<view class="role">研学会员</view>
				</view> -->
			</view>
			<view class="box-end">
				<view class="total-box">累计参营次数：{{ userInfo.countCamp }}</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { uniGetStorageSync } from '@/utils/index.js';
import defaultPhoto from '@/asstes/images/mine/default-photo.png';
// 用户信息
const userInfo = computed(() => {
	return uniGetStorageSync('auth') || {};
});
</script>

<style lang="scss" scoped>
.custom-info {
	border-radius: 10rpx;
	background: linear-gradient(132.76deg, rgba(54, 255, 173, 1) 0%, rgba(52, 165, 255, 1) 100%);
	padding: 24rpx 40rpx;

	&-box {
		display: flex;
		align-items: center;
	}
}

.photo {
	width: 132rpx;
	height: 132rpx;
	margin-right: 26rpx;
	border-radius: 50%;
	overflow: hidden;
	image {
		width: 100%;
		height: 100%;
		display: block;
	}
}

.login-tips-text {
	font-size: 40rpx;
	color: white;
}

.flex-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.info-box {
	margin-left: 28rpx;
	color: white;

	.userName-box {
		font-weight: 500;
		font-size: 32rpx;
	}

	.phone-box {
		font-size: 24rpx;
	}
}
.level {
	font-size: 24rpx;
}
.role {
	font-size: 28rpx;
	margin-left: 6rpx;
}
.box-baseline {
	align-items: baseline;
	color: white;
}
.total-box {
	color: white;
	font-size: 24rpx;
}
.box-end {
	justify-content: flex-end;
	display: flex;
	align-items: center;
	margin-top: 24rpx;
}
</style>
